<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p11_定位广告</title>
    <style>
        .top {
            background-color: #5AA4AE;
            height: 120px;
            /* 使用固定定位 */
            position: fixed;
            /* 宽度为视口宽度的100% */
            width: 100vw;
            /* 距离视口html顶部的距离为0 */
            top: 0;
        }
        .main {
            margin-top: 130px;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
            left: 20px;
        }
        .right {
            background-color: #F35336;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <!--lorem*60-->
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias debitis eaque eum ex fugit hic illum iste
            laudantium nisi nobis pariatur perferendis porro quia reprehenderit sequi tempora veniam, voluptas.
        </div>
        <div>A adipisci animi commodi deserunt earum et eum expedita iste laborum, magnam minus provident quae quam
            quibusdam quo quod ratione, reiciendis saepe sed similique sunt tempore ut vitae voluptas, voluptates.
        </div>
        <div>Accusantium cupiditate eos iste magni natus necessitatibus, praesentium quidem quo recusandae repudiandae
            sapiente, voluptas! Corporis esse, eum ex illo ipsum iure laboriosam molestias nesciunt nihil nostrum
            officiis recusandae temporibus vel.
        </div>
        <div>Beatae excepturi, laudantium maxime possimus quam qui recusandae sed similique unde vel. Accusamus illum
            iusto magnam mollitia sit tenetur voluptas. Aliquid dolores, fugit labore laudantium mollitia nam nisi
            quisquam veritatis.
        </div>
        <div>Dolores facilis fugiat laboriosam maiores necessitatibus, quaerat. Alias delectus dolor facilis fugiat
            mollitia, neque quae totam vel. Accusantium aut et fuga laudantium minima, nihil quisquam repudiandae
            sapiente. Ab, commodi, perspiciatis.
        </div>
        <div>Alias aspernatur consectetur, consequatur culpa dignissimos dolor enim error, eveniet exercitationem fugiat
            illo in incidunt maiores minima necessitatibus, neque numquam placeat possimus praesentium quidem
            repellendus rerum tenetur totam vel voluptatibus.
        </div>
        <div>Alias assumenda aut beatae distinctio dolor, id iusto praesentium! Accusamus alias excepturi fuga in iste
            magni quas ut! Aliquam aut dolorum est illo iure labore molestias nostrum quo recusandae voluptate?
        </div>
        <div>Architecto aut commodi distinctio doloribus dolorum ea earum eius eligendi esse est ex hic libero magni
            maiores maxime modi nisi, nobis pariatur perferendis quaerat quibusdam quos repellat saepe ut voluptatem!
        </div>
        <div>Ab amet corporis ducimus eos ex, magnam necessitatibus nostrum nulla ratione reiciendis! Aut commodi
            consequatur, culpa dolor ea earum explicabo id illo ipsum neque nesciunt officiis optio placeat rerum
            voluptatum.
        </div>
        <div>Animi architecto asperiores harum ipsum iste neque nisi qui quos totam. Debitis dignissimos exercitationem
            minima nesciunt nobis officia quas tempora? Alias aut autem maxime nihil optio quod voluptate! Facilis,
            unde.
        </div>
        <div>Ad aliquid beatae consectetur consequatur consequuntur corporis deserunt, eaque et eum eveniet fugiat hic
            laboriosam minima molestiae molestias nam nesciunt numquam, odio perspiciatis porro quos rem saepe suscipit,
            ut voluptates.
        </div>
        <div>Accusamus beatae corporis culpa, dicta distinctio doloribus error inventore neque, nesciunt nobis
            perspiciatis possimus quod! Adipisci aperiam asperiores aut enim ex incidunt inventore non placeat quidem
            voluptates? Aliquam, aut similique.
        </div>
        <div>Adipisci at dolore eos, iure quos sapiente. Ad asperiores commodi ea eum inventore omnis qui, saepe totam!
            Accusamus at aut autem exercitationem maxime nisi porro praesentium quos sint, ullam! Est?
        </div>
        <div>Accusamus aspernatur consectetur consequuntur deleniti, dicta doloribus earum illo inventore ipsam iusto
            nihil nostrum nulla officia officiis omnis pariatur possimus quisquam quos recusandae reiciendis repellendus
            sint sit tempore veritatis voluptatibus!
        </div>
        <div>Accusamus, consequuntur dolorem ducimus earum error esse magni. Accusantium debitis expedita itaque
            quibusdam sapiente sit temporibus vero voluptate! Amet et ex inventore nemo perspiciatis praesentium qui
            tempora tempore ullam voluptatum.
        </div>
        <div>Aliquam atque cumque deleniti dolorem eius facilis harum laudantium magnam nesciunt odit placeat, quaerat,
            quod reiciendis repellat suscipit totam unde veritatis voluptas voluptate voluptates? Dicta laudantium
            nostrum quibusdam ratione recusandae.
        </div>
        <div>Accusantium autem, cum cumque dignissimos eligendi error iure molestias nesciunt pariatur quam ratione
            veniam? Distinctio labore minus tenetur. Alias commodi officia provident quod, recusandae tenetur vel.
            Cumque eveniet nam reprehenderit.
        </div>
        <div>Dignissimos dolorum ducimus maiores necessitatibus totam? Accusamus cum deserunt dicta dignissimos eaque
            earum, eius facere fugiat, id iste magni pariatur quis similique sunt temporibus tenetur, veniam. Doloremque
            optio quibusdam veritatis!
        </div>
        <div>Accusantium, at atque beatae corporis cum cumque dolorem dolorum ducimus in laudantium molestiae, officiis
            soluta veniam. Aliquam asperiores aspernatur atque culpa, deserunt ducimus eos excepturi praesentium
            quibusdam repellat vero voluptate.
        </div>
        <div>Asperiores, autem beatae cumque doloremque doloribus enim id inventore, laudantium modi obcaecati quos
            saepe vitae. Culpa eveniet fugiat illo impedit inventore laudantium nam necessitatibus nulla quasi quod
            sint, tempore, veniam?
        </div>
        <div>Aut autem culpa cum deleniti dolore fugit ipsa ipsum iusto obcaecati odit perferendis perspiciatis quam,
            quia, quo quod recusandae repellendus rerum sit, sunt voluptatibus! Adipisci aspernatur deserunt ducimus eos
            numquam!
        </div>
        <div>Dolore, id, ullam. Delectus, dignissimos dolore doloribus eligendi itaque, natus nobis officia praesentium
            provident quibusdam quis tempora unde veritatis. Delectus dolorem dolorum ea impedit ipsam maxime molestias
            quas quasi tempore!
        </div>
        <div>Culpa doloremque iste non quis repellendus totam veniam! Alias maiores modi optio possimus reiciendis.
            Autem delectus eaque ipsam necessitatibus nostrum officia quis quo saepe sapiente sit? Adipisci hic qui
            reprehenderit?
        </div>
        <div>Aperiam aspernatur assumenda doloremque eveniet impedit laudantium, quibusdam ratione. Aliquid deleniti
            dignissimos dolor incidunt natus quibusdam? Eligendi facere incidunt, laborum libero, nemo nihil, placeat
            possimus rem ullam unde vel vero.
        </div>
        <div>Accusantium ad, consequatur culpa, dignissimos ducimus ea error est harum impedit incidunt ipsum libero
            magni molestias nesciunt nihil odit omnis pariatur porro sint sit tempore ullam ut. Necessitatibus nulla,
            quam!
        </div>
        <div>Adipisci at commodi consectetur delectus, error eum explicabo harum id libero molestias, necessitatibus
            neque officia saepe sit ullam unde velit voluptas voluptatibus. Accusamus cupiditate dolore error, ex saepe
            vel veritatis.
        </div>
        <div>A, accusantium, alias animi autem eum fugiat labore laudantium non numquam obcaecati quaerat repudiandae?
            Aperiam atque consectetur, fugit molestiae mollitia natus quisquam rerum sit veniam voluptates? Aliquam
            doloribus repellendus voluptate.
        </div>
        <div>Ab, aspernatur assumenda atque culpa cumque, cupiditate eaque expedita facilis hic illo iusto magni
            molestias nostrum numquam odio perspiciatis quam quia quibusdam quod similique sit sunt ut vitae voluptas
            voluptate!
        </div>
        <div>Ad at eveniet impedit? Accusamus aliquid animi distinctio dolorum, eum eveniet in inventore, ipsa minus
            nesciunt, quae quisquam repudiandae? Ab corporis cupiditate doloremque doloribus dolorum eius error labore
            laudantium sint.
        </div>
        <div>Alias, blanditiis consequatur eius iure magnam non quod! Ad aperiam asperiores commodi dolore error hic,
            iusto maiores minima odit pariatur ratione unde ut vitae? Doloremque doloribus eveniet fugit hic nostrum!
        </div>
        <div>Accusamus atque eius, et ex facilis inventore iure labore laboriosam quo tenetur! Accusamus consequatur est
            sapiente tenetur veniam. Aperiam eos fugit odit! Aspernatur deserunt dignissimos facere harum impedit odit
            omnis?
        </div>
        <div>Dolor hic neque nostrum provident quas sunt veniam. Aspernatur, assumenda autem eveniet impedit nesciunt
            quae rerum sapiente vitae. Cumque dignissimos dolore facere labore voluptatibus. Blanditiis commodi eius hic
            rerum sit!
        </div>
        <div>Amet, commodi consequatur deleniti doloribus expedita, fugit hic in, ipsam nemo nostrum placeat praesentium
            ratione repellat vero voluptatum! Animi eius fuga illo? Magnam necessitatibus nihil rem vel veritatis?
            Dolorum, eum.
        </div>
        <div>Aut eaque itaque obcaecati provident, reprehenderit voluptatum? Beatae magnam praesentium repudiandae ut
            voluptas? Amet aspernatur consequatur consequuntur delectus dolor ducimus eveniet laborum nemo nihil nisi
            quia quibusdam quis, rerum sapiente.
        </div>
        <div>Beatae id itaque labore maiores molestias neque numquam praesentium recusandae? Adipisci, aliquam
            assumenda, consequatur, doloremque mollitia nisi quam quidem recusandae repellat sequi sunt ullam veniam
            voluptates. Doloremque, ipsa, sequi. Voluptatum.
        </div>
        <div>Adipisci aliquid assumenda autem ea expedita laboriosam necessitatibus optio reiciendis, voluptatum.
            Dolores eligendi ratione repudiandae? Atque esse hic molestiae omnis quia quidem, quod saepe sequi tenetur
            ut velit voluptas. Vero.
        </div>
        <div>Ad consequuntur, dicta doloremque esse laborum magni minima nobis non nostrum possimus repellat, similique
            sunt, tempore! Aliquid aperiam doloribus enim esse ex ipsum itaque, nemo odit quo repellat ullam voluptate.
        </div>
        <div>Autem delectus ea id illo nobis nostrum quaerat qui quia quod, repellat sapiente sit temporibus veritatis?
            Autem consectetur dolore est harum odit omnis quae rem! Eum mollitia nobis pariatur repudiandae.
        </div>
        <div>Architecto at aut, blanditiis facere id illo ipsa, magni minus nam nisi nulla odit porro quaerat qui rem
            repellat reprehenderit rerum sint sit, voluptate? Deserunt, hic, labore? Esse, provident voluptatem.
        </div>
        <div>Dicta distinctio eveniet explicabo in ipsam laboriosam magnam nisi nostrum qui quis recusandae similique,
            totam. Aspernatur assumenda dicta esse, expedita impedit in libero, molestiae obcaecati possimus sed, sint
            tempora tempore!
        </div>
        <div>Autem beatae consectetur cum dolorem doloremque ducimus esse et eveniet id illum ipsum labore laboriosam
            maxime, modi nostrum officia omnis possimus quas quidem quis repellat repellendus sapiente similique vel
            voluptate.
        </div>
        <div>Accusantium autem corporis dolorum eaque error in inventore molestias numquam obcaecati sapiente, sit,
            tempore vero! Consectetur culpa distinctio harum impedit laudantium provident rerum tenetur veniam
            voluptatem! Eligendi laboriosam quis quos.
        </div>
        <div>Dignissimos eaque exercitationem fuga illo maxime molestiae molestias natus obcaecati, perspiciatis, quasi
            quo ratione repellendus sequi? Asperiores, quas, veritatis! Atque blanditiis culpa cupiditate doloremque
            doloribus eveniet necessitatibus quod tempore vel!
        </div>
        <div>Ab accusamus ad alias, aliquid animi beatae culpa dicta dolor eaque eos illum labore molestiae molestias,
            neque perferendis porro quaerat quidem sed ut voluptatum! Aliquam consequatur laudantium nulla reiciendis
            voluptates!
        </div>
        <div>Ad adipisci aliquam assumenda beatae debitis deserunt doloremque ducimus enim illo in ipsum iste laboriosam
            maxime nemo, nihil optio porro provident quaerat quis recusandae reprehenderit, repudiandae, rerum sint
            tempore voluptas.
        </div>
        <div>Accusamus adipisci assumenda deleniti dolores ex repudiandae voluptate? Blanditiis debitis earum eligendi
            in, laudantium nesciunt odio quam veniam. Corporis cum cupiditate iure, laboriosam minima nam nesciunt non
            praesentium quibusdam ut?
        </div>
        <div>Aperiam aspernatur assumenda consequuntur dolore ex laborum nostrum obcaecati ratione sit voluptate!
            Aliquid aut beatae dolores incidunt magni nesciunt perspiciatis qui ratione. Accusamus dignissimos doloribus
            harum maiores, rem voluptatibus voluptatum?
        </div>
        <div>Alias amet, at cumque eveniet minima voluptatibus. A aliquid delectus deserunt distinctio eos esse ex,
            facere numquam perferendis placeat praesentium qui quo ratione repudiandae rerum similique totam voluptas
            voluptatem, voluptatum.
        </div>
        <div>Accusantium beatae cum deleniti enim, libero nesciunt qui rerum. A aliquam eaque eligendi est eum eveniet,
            facilis magni porro. Aliquam debitis eligendi explicabo fugit placeat ratione saepe soluta velit voluptate.
        </div>
        <div>Architecto ducimus illum pariatur repudiandae. Accusantium, asperiores at aut consectetur culpa delectus
            dolorum earum facere hic, libero magni natus nobis numquam omnis, quaerat qui quibusdam quo suscipit veniam
            voluptatem voluptatibus!
        </div>
        <div>Ad at delectus dolore earum fugit illum ipsum iure molestias nemo neque nisi, pariatur perferendis quos rem
            saepe sint velit, voluptatem voluptates? Amet dolore dolorum ea enim hic praesentium rem!
        </div>
        <div>Asperiores facere laudantium, molestias optio pariatur voluptate? Consequatur corporis enim impedit ipsa
            ipsam iure labore minima nemo praesentium sunt! Aut commodi ducimus est ipsum minus quo ratione tenetur?
            Aperiam, eaque.
        </div>
        <div>A at ducimus expedita incidunt, magni molestias non repellendus voluptas! Cumque eligendi eveniet expedita
            harum pariatur quae quibusdam repellendus, tempora unde. Consequatur cupiditate eius ex, maiores maxime quam
            tempora ut?
        </div>
        <div>Autem cumque dolore ex explicabo quod totam vel. Aliquid autem cumque deserunt dicta dolorem est, excepturi
            harum labore minus modi molestiae natus odit porro quasi quibusdam, recusandae sint, tempora voluptas.
        </div>
        <div>Ab asperiores consequuntur deleniti deserunt earum eligendi enim ex facere facilis fugit iusto laudantium,
            libero maiores mollitia neque, nesciunt nulla optio porro quam quibusdam quisquam recusandae repellat sequi
            temporibus voluptatum.
        </div>
        <div>Deleniti eaque eligendi fuga illum impedit necessitatibus optio qui, quis recusandae repellat totam veniam
            veritatis voluptates? Ad aliquam consequatur culpa distinctio expedita numquam. Alias ex iusto, qui
            recusandae voluptates voluptatibus!
        </div>
        <div>Aspernatur enim ex id inventore ipsa nemo nobis, nostrum omnis quasi qui, quia repudiandae sed vel. Aut
            consequuntur error est fugit illum, placeat provident quae quas saepe temporibus ullam, vel?
        </div>
        <div>A adipisci architecto commodi deserunt, dignissimos dolorem enim fugit iste laboriosam laudantium neque
            numquam ratione saepe vero, voluptatum. Ad aliquid animi architecto eum ex nam neque, nulla possimus
            provident sit!
        </div>
        <div>Ab at atque aut cumque, delectus dignissimos dolor dolorem doloremque enim esse ex, expedita explicabo iste
            iusto laboriosam magnam modi molestias, necessitatibus nesciunt officiis quis tempora tempore voluptas
            voluptatem voluptatibus.
        </div>
        <div>Adipisci aperiam asperiores, dignissimos, distinctio ipsa modi officiis pariatur quasi quia repellendus sed
            tempore vero vitae. Consequuntur dolorem doloremque error, illum odit vel. Alias, consequuntur eligendi et
            ex nisi veniam.
        </div>
    </div>
</body>
</html>